<template>
  <div>
    <div class="box">
      <van-skeleton title :row="3" :loading="loading">
        <div class="box-goods" v-for="(item, index) in data" :key="index">
          <div style="width: 100px; padding: 5px">
            <div>{{ item.name }}</div>
            <div class="goodsCount">{{ item.count }} 个商品</div>
          </div>
          <div style="flex: 1; padding-top: 7px; text-align: right">
            <span style="padding-left: 10px">
              <van-button
                round
                type="danger"
                size="normal"
                @click="del(item.id)"
                >删除</van-button
              >
            </span>
            <span style="padding-left: 10px">
              <van-button
                round
                type="primary"
                size="normal"
                @click="update(item.id, item.name, item.explain)"
                >编辑</van-button
              >
            </span>
            <span style="padding-left: 10px">
              <van-button
              v-if="item.isTop===0"
                round
                type="warning"
                size="normal"
                @click="Top(item.id, item.isTop)"
                >置顶</van-button
              >
              <van-button
              v-if="item.isTop===1"
                round
                color="gray"
                size="normal"
                @click="Top(item.id, item.isTop)"
                >取消置顶</van-button
              >
             
            </span>
          </div>
        </div>
        <div style="margin-top: 10px">
          <van-button type="primary" block @click="add">新增分类</van-button>
        </div>
      </van-skeleton>
    </div>
  </div>
</template>

<script>
import { getGoodsTypes, SupplierDeleteType, SupplierTypeTop } from "../api/good";
import { reactive, toRefs, watchEffect } from "vue";
import { showSuccessToast, showConfirmDialog } from "vant";
import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();

    const data = reactive({
      data: [],
      dataName: "",
      dataExplain: "",
      loading: true,
      goodId: "", //编辑商品的id
    });

    const methods = {
      bindType() {
        getGoodsTypes({}).then((res) => {
          if (res.result === 0) {
            data.data = res.data;
            data.loading = false;
          }
        });
      },
    };

    watchEffect(() => {
      methods.bindType();
    });

    const event = {
      //删除
      del(id) {
        showConfirmDialog({
          message: "确认删除吗",
        })
          .then(() => {
            SupplierDeleteType({
              id: id,
            }).then((res) => {
              if (res.result === 0) {
                showSuccessToast("操作成功");
                methods.bindType();
              }
            });
          })
          .catch(() => {});
      },

      //编辑跳转
      update(id, name, explain) {
        router.push({
          path: "/shangpin/updateGoodsInfo",
          query: { id: id, name: name, explain: explain },
        });
      },

      //置顶-取消置顶
      Top(id, isTop) {
        SupplierTypeTop({
          id: id,
          isTop: isTop === 0 ? "1" : "0",
        }).then((res) => {
          if (res.result === 0) {
            showSuccessToast("操作成功");
            methods.bindType();
          }
        });
      },
      //新增分类
      add() {
        router.push({ path: "/shangpin/addType" });
      },
    };

    return {
      ...toRefs(data),
      ...event,
    };
  },
};
</script>

<style scoped>
.box {
  margin: 5px;
  padding: 5px;
  width: 95%;
}

.box-goods {
  display: flex;
  padding: 5px;
  height: 60px;
  border-bottom: 1px solid #eee;
}

.goodsCount {
  margin-top: 10px;
}
</style>